<template>
  <div class="filters w-full bg-white px-16px flex">
    <div class="item flex items-center mr-16px" @click="knowledge.isShowChooseKpointDialog = true">
      <span class="label">知识点：</span>
      <el-input
        v-model="knowledge.name"
        :readonly="true"
        placeholder="请选择"
      />
    </div>
    <div class="item flex items-center mr-16px">
      <span class="label">习题范围：</span>
      <el-select v-model="range.value" placeholder="请选择">
        <el-option
          v-for="item in range.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="item-auto items-center flex mr-16px">
      <img
        v-show="practiced.value"
        src="@/assets/exercise/seed@2x.png"
        alt=""
        @click="practiced.value = false"
        class="mr-6px"
      />
      <img
        v-show="!practiced.value"
        src="@/assets/exercise/crile@2x.png"
        alt=""
        style="margin-left: auto !important"
        class="mr-6px"
        @click="practiced.value = true"
      />
      <span>只看已做题的知识点</span>
    </div>
    <div class="item-auto flex items-center mr-16px" @click="search">
      <div class="btn-search flex-center">搜索</div>
    </div>
    <div class="item-auto flex items-center" @click="reset">
      <img class="btn-reset" src="static/icons/reset.png" mode="" />
    </div>

    <!-- 选择知识点弹窗 -->
    <div class="dialog-wrap" v-show="knowledge.isShowChooseKpointDialog">
      <div class="choose-kpoint flex flex-col bg-white px-84px py-30px relative">
        <div class="header">
          <img
            class="close absolute"
            src="static/icons/close.png"
            mode=""
            @click="knowledge.isShowChooseKpointDialog = false"
          />
          <div class="w-full title text-center text-262A30 font-medium mb-20px">选择知识点</div>
        </div>
        <!-- <el-input v-model="knowledge.keyword" class="mb-20px" placeholder="搜索知识点" /> -->
        <div class="flex-1 overflow-scroll">
          <el-tree
            :indent="0"
            class="tree-line"
            :data="knowledge.renderList"
            :props="knowledge.treeProps"
            :highlight-current="true"
            @node-click="knowledge.handleNodeClick($event)"
          >
            <template #default="scope">
              <div class="customRow" v-if="scope.node.expanded">
                <img src="@/assets/exercise/jianhao@2x.png" alt="" @click="changeFlag" />
                <span :style="{ color: knowledge.value == scope.data.id ? '#00A7FFFF' : '' }">{{
                  scope.data.name
                }}</span>
              </div>
              <div class="customRow" v-else>
                <div
                  class="jiao-mark"
                  v-if="scope.data.children && scope.data.children.length !== 0"
                >
                  <img src="@/assets/exercise/jiahao@2x.png" alt="" @click="changeFlag" />
                </div>
                <span :style="{ color: knowledge.value == scope.data.id ? '#00A7FFFF' : '' }">{{
                  scope.data.name
                }}</span>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserKpointTreeApi } from '@/api/exercise'
let _that
export default {
  props: {
    subjectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pending: false,
      isClickImg: false, //点击的是否是展开图标
      // 知识点
      knowledge: {
        isShowChooseKpointDialog: false,
        name: '',
        value: '',
        keyword: '',
        treeProps: {
          children: 'children',
          label: 'name'
        },
        list: [],
        treeList: [],
        renderList: [],
        handleNodeClick: function (e) {
          const { id, name } = e

          this.name = name
          this.value = id
          if (!_that.isClickImg) {
            this.isShowChooseKpointDialog = false
          }
        }
      },
      // 范围
      range: {
        value: 30,
        options: [
          {
            value: 30,
            label: '近30题'
          },
          {
            value: 50,
            label: '近50题'
          },
          {
            value: 100,
            label: '近100题'
          },
          {
            value: -1,
            label: '全部'
          }
        ]
      },
      // 只看已做题的知识点
      practiced: {
        value: true
      }
    }
  },
  watch: {
    'practiced.value': function () {
      if (this.pending) return

      this.search()
    },
    'knowledge.keyword': function (newVal) {
      if (!newVal) {
        this.knowledge.renderList = this.knowledge.treeList
        return
      }

      const { list } = this.knowledge

      const filters = list.filter((i) => i.name.indexOf(newVal) != -1)
      this.knowledge.renderList = filters
    },
    subjectId(newVal) {
      this.init(newVal)
    }
  },
  created() {
    _that = this
  },
  mounted() {},
  methods: {
    changeFlag() {
      this.isClickImg = true
      setTimeout(() => {
        this.isClickImg = false
      })
    },
    async init(subjectId) {
      const { data } = await getUserKpointTreeApi({
        subjectId,
        name: ''
      })

      if (data.length === 0) return

      const initKPointList = (sourceList, result) => {
        sourceList.forEach((e) => {
          const { children } = e

          if (children && children.length > 0) {
            const obj = JSON.parse(JSON.stringify(e))
            obj.children = []
            result.push(obj)
            initKPointList(children, result)
          } else {
            result.push(e)
          }
        })

        return result
      }

      this.knowledge.list = initKPointList(data, [])
      this.knowledge.treeList = data
      this.knowledge.renderList = data
      this.knowledge.name = ''
      this.knowledge.value = ''
      this.knowledge.keyword = ''

      this.$nextTick(() => {
        const treeNodes = document.getElementsByClassName('el-tree-node__expand-icon')

        for (let i = 0; i < treeNodes.length; i++) {
          if (treeNodes[i].className.indexOf('is-leaf') === -1) {
            treeNodes[i].addEventListener('click', () => {}, true)
          }
        }
      })
    },
    // 搜索
    search() {
      this.$emit('search')
    },
    // 重置
    reset() {
      this.pending = true
      this.knowledge.name = ''
      this.knowledge.value = ''
      this.knowledge.keyword = ''
      this.range.value = 30
      this.practiced.value = true
      this.search()
      this.$nextTick(() => {
        this.pending = false
      })
    },
    getData(nextProps) {
      const { subjectId } = nextProps

      return {
        kpointName: subjectId === this.subjectId ? this.knowledge.name : '',
        did: this.practiced.value ? 1 : 0,
        questionNum: this.range.value
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tree-node__expand-icon::before {
  content: ' ' !important;
}
.customRow {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
  transform: translateX(-9.5px);
  > img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  .jiao-mark {
    position: relative;
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }
  span {
    font-size: 26px;
    color: #768895ff;
  }
}
// 树样式
.tree-line {
  ::v-deep .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
    &__content {
      height: 42px; //单行高度42px
      display: flex;
      align-items: center;
      margin: 0px;
    }
  }
  > ::v-deep .el-tree-node {
    > .el-tree-node__content {
      > .customRow {
        > span {
          color: #333333ff;
        }
      }
    }
  }
  ::v-deep .el-tree-node__children {
    padding-left: 16px; // 缩进量
    position: relative;
    margin: 0;
  }

  // 竖线
  ::v-deep .el-tree-node__children::before {
    content: '';
    height: 100%;
    width: 0px;
    position: absolute;
    left: 13px;
    top: 0px;
    border-left: 2px dashed #e5e8ecff;
  }
  // 横线
  ::v-deep .el-tree-node::after {
    content: ' ';
    width: 16px;
    height: 0px;
    position: absolute;
    left: 0px;
    top: calc(50% - 0.5px);
    border-top: 1px dashed #e5e8ecff;
    z-index: 99;
  }
  ::v-deep .jiao-mark {
    &::before {
      content: '';
      width: 20px;
      height: 10px;
      position: absolute;
      left: -20px;
      top: calc(50% - 5px);
      z-index: 999;
      background-color: #fff;
    }
  }
  ::v-deep .is-expanded::after {
    content: '';
    border: none !important;
  }
  // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
  & > ::v-deep .el-tree-node::after {
    content: '';
    border: none !important;
  }
  // 展开关闭的icon
  ::v-deep .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶⼦节点（⽆⼦节点）
    ::v-deep &.is-leaf {
      color: transparent;
      display: none; // 也可以去掉
    }
  }
}
.filters {
  min-height: 64px;
  font-weight: 500 !important;
  font-size: 26px !important;
  color: #000;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: nowrap;
  span {
    white-space: nowrap;
  }
  .item {
    .label {
      font-size: 26px;
      color: #333;
    }
  }

  .item-auto {
    img {
      width: 30px;
      height: 30px;
    }

    .btn-search {
      width: 88px;
      height: 54px;
      background: #51c3ff;
      border-radius: 8px;
      color: #fff;
      font-size: 26px;
      margin-right: 10px;
    }

    .btn-reset {
      width: 54px;
      height: 54px;
    }
  }

  .dialog-wrap {
    width: 100vw;
    height: 100vh;
    background: rgba($color: #000000, $alpha: 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1999;

    .choose-kpoint {
      width: 70%;
      height: 80%;
      border-radius: 16px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .close {
        width: 26px;
        height: 26px;
        top: 16px;
        right: 16px;
      }

      .header {
        .title {
          font-size: 28px;
          line-height: 30px;
          font-weight: bold;
        }
      }
    }
  }
}
::v-deep .el-input {
  width: 200px !important;
    input {
      font-size: 26px !important;
    }
    .el-input__inner{
      font-size: 26px !important;
    }
  }
li {
  font-size: 26px !important;
}
</style>
